<template>
  <div>
    <el-form :inline="true" :model="query" label-position="top">
      <el-form-item>
        <el-col :span="11">
          <el-date-picker v-model="query.startTime" type="date" placeholder="生效开始" />
        </el-col>
        <el-col :span="2" class="text-center">至</el-col>
        <el-col :span="11">
          <el-date-picker v-model="query.endTime" type="date" placeholder="生效截止" />
        </el-col>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="search" @click="loadPage(1)">检索</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="page.content" :loading="query.loading" border style="width: 100%">
      <el-table-column prop="id" label="编号" width="100" />
      <el-table-column prop="abbr" label="简称" width="220" />
      <el-table-column prop="name" label="币种" />
      <el-table-column prop="exchangeRate" label="汇率" />
      <el-table-column prop="startTime" label="生效开始" />
      <el-table-column prop="endTime" label="生效截止" />
    </el-table>
    <!-- pagination -->
    <el-pagination @current-change="showPage" :current-page.sync="page.page" 
      :page-size="page.pageSize" :total="page.totalElements" layout="total, prev, pager, next, jumper" />
  </div>
</template>

<script>
import { ExchangeRate } from '@/store/api'
import Pagination from '@/utils/pagination'

export default {
  created() {
    this.loadPage(1)
  },
  data() {
    return {
      page: {
        content: []
      },
      query: {
        abbr: this.$route.params.abbr,
        loading: true
      }
    }
  },
  methods: {
    ...Pagination,
    list(page, query) {
      this.query.loading = true
      return ExchangeRate.history(query).then(data => {
        this.page = data
        this.query.loading = false
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.el-input {
  width: 100%;
}
</style>
